<script setup>
import { onMounted, provide, ref } from "vue";
import useListData from "@/hooks/list-data";
import ClientListFilter from "./ClientListFilter.vue";
import cloneDeep from "lodash/cloneDeep";
import { lowerCountApi, clientListListApi } from "@/services/client";

import { userlevel } from "@/services/user";
import Nodata from "@/pages/components/nodata.vue";
import useFormat from "@/hooks/format";

const { formatPhone } = useFormat();

// form values
const filterFormValues = ref({
  keyword: undefined, // 搜索关键字
  month: undefined,
  level_id: undefined,
});
const sxlist = ref([]);
// init data loading
const initDataLoading = ref(true);
// list data
const listData = useListData({
  loadData: (params) => {
    const paramsData = cloneDeep({
      ...params,
      keyword: filterFormValues.value.keyword,
      month: filterFormValues.value.month,
      level_id: filterFormValues.value.level_id,
    });
    return clientListListApi(paramsData);
  },
});
// api得到的数据 展示
const showDetail = ref(undefined);

// 跳转到详情
const toDetail = (item) => {
  uni.navigateTo({
    url: "/pages/client-detail/Index?id=" + item.uid,
  });
};

// init
const initData = async () => {
  try {
    initDataLoading.value = true;
    const results = await Promise.all([lowerCountApi(), userlevel()]);
    showDetail.value = results[0].data;
    listData.value.initData();
    initDataLoading.value = false;
    let arr = [];
    for (let key in results[1].data) {
      arr.push({ level_id: key, name: results[1].data[key] });
    }

    sxlist.value = arr;
  } catch (error) {
    initDataLoading.value = false;
  }
};

// const

const spickfun = (name) => {
  if (name.length > 3) {
    return name.slice(0, 3) + "...";
  } else {
    return name;
  }
};

const callphone = (item) => {
  uni.makePhoneCall({
    phoneNumber: item.ot_phone,
  });
};

onMounted(() => {
  initData();
});

// provide
provide("filterFormValues", filterFormValues);
provide("listData", listData);
provide("sxlist", sxlist);
</script>

<template>
  <view class="container">
    <template v-if="!initDataLoading">
      <!-- <view class="filter-client-number-warp">
        <view class="flex-1">
          <view class="client-num">
            <up-count-to
              :endVal="showDetail ? showDetail.lower_count : 0"
              separator=","
              :duration="100"
              color="#000"
              fontSize="18"
              bold
            ></up-count-to>
          </view>
          <view class="client-item-warp">
            <text>直推客户</text>

            <text>(人)</text>
          </view>
        </view>
        <view class="client-number-line"> </view>
        <view class="flex-1">
          <view class="client-item-warp">
            <view class="client-num">
              <up-count-to
                :endVal="showDetail ? showDetail.sum_count : 0"
                separator=","
                :duration="100"
                color="#000"
                fontSize="18"
                bold
              ></up-count-to>
            </view>
            <text>团队总数（人） </text>
          </view>
        </view>
      </view> -->

      <!-- filter -->
      <ClientListFilter />

      <!-- scroll view -->
      <scroll-view
        class="scroll-view"
        scrollY
        refresherEnabled
        :refresherTriggered="listData.refresherTriggered"
        @scrolltolower="listData.loadMoreData"
        @refresherrefresh="listData.pullDownRefresh"
        refresherBackground="#f5f5f5"
      >
        <view class="content-lists">
          <view
            class="content-lists-item"
            v-for="(items, indexs) in listData.dataSource"
            :key="indexs"
          >
            <view class="content-lists-top">
              <text>{{ items.date }}</text>
              <text
                >注册（人数）：<text class="content-lists-top-num">{{
                  items.count
                }}</text></text
              >
            </view>
            <view class="content-list" v-if="items.list.length > 0">
              <view
                class="content-list-item"
                v-for="(item, index) in items.list"
                :key="index"
                @click="toDetail(item)"
              >
                <view class="content-list-item-top">
                  <view class="content-list-item-name">
                    <!-- <text>{{
                      item.name
                        ? item.name
                        : item.nickname
                        ? item.nickname
                        : "---"
                    }}</text> -->
                    <text>{{ item.nickname ? item.nickname : "---" }}</text>

                    <view
                      class="lv-name"
                      :class="
                        item.level_id
                          ? 'lv-name-' + item.level_id
                          : 'lv-name-qy'
                      "
                      v-if="item.level && item.level.icon"
                    >
                      <image :src="item.level.icon" mode="widthFix"></image
                    ></view>
                    <!-- <text
                      class="lv-name"
                      :class="
                        item.level_id
                          ? 'lv-name-' + item.level_id
                          : 'lv-name-qy'
                      "
                      v-if="item.level && item.level.name"
                      >{{
                        item.level && item.level.name ? item.level.name : ""
                      }}</text
                    > -->
                  </view>
                  <view
                    class="content-list-item-phone"
                    @click.stop="callphone(item)"
                  >
                    <text>{{ item.phone ? item.phone : "---" }}</text>
                    <image
                      src="@/pages/team/static/phone.png"
                      mode="scaleToFill"
                    />
                  </view>
                </view>
                <view class="content-list-item-bt"
                  >注册时间：{{
                    item.create_time ? item.create_time : "---"
                  }}</view
                >
              </view>
            </view>
          </view>
        </view>

        <!-- <view class="content custom-table-container">
          <view class="th-uni-row">
            <uni-row :gutter="1">
              <uni-col :span="7">
                <view class="text-left"> 名称 </view>
              </uni-col>
              <uni-col :span="7">
                <view class="text-center">手机号</view>
              </uni-col>
              <uni-col :span="10">
                <view class="text-center">注册时间</view>
              </uni-col>
            </uni-row>
          </view>

          <view class="th-line">{{ listData.dataSource }}</view>
          <view
            class="td-uni-row"
            v-for="(item, index) in listData.dataSource"
            :key="index"
            @click="toDetail(item)"
          >
            <uni-row :gutter="1">
              <uni-col :span="7">
                <view class="text-left">
                  <text class="text-left-nickname">
                    {{ item.nickname ? spickfun(item.nickname) : "-" }}
                  </text>
              

                  <text class="distributors-tag">{{ item.level.name }}</text>
                </view>
              </uni-col>
              <uni-col :span="7">
                <view class="text-center">
                  {{ (item.phone && formatPhone(item.phone)) || "-" }}
                </view>
              </uni-col>
              <uni-col :span="10">
                <view class="text-center">{{ item.create_time || "-" }}</view>
              </uni-col>
            </uni-row>
          </view>

        
        </view> -->
        <Nodata
          v-if="
            listData.dataSource &&
            listData.dataSource.length === 0 &&
            listData.pagination.status === 'noMore'
          "
        ></Nodata>
        <uni-load-more
          :status="listData.pagination.status"
          class="load-more"
          :contentText="{
            contentdown: '上拉显示更多',
            contentrefresh: '正在加载...',
            contentnomore: '没有更多数据了',
          }"
        />
      </scroll-view>
      <br />
    </template>
    <view v-else>
      <view class="init-data-loading">
        <up-loading-icon></up-loading-icon>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "./Index.scss";
</style>
